<template>
	<view>
		<cu-custom bgColor="bg-gradual-blue" :isBack="true">
			<block slot="content">我的请假</block>
			<view slot="right" @tap="add" style="margin-right: .4em;display: flex;align-items: center;">
				<text class="iconfont icon-jia"></text>
				<text style="margin-left: 5px;margin-right: 6px;margin-bottom: .1em; font-size: 18px;">申请</text>
			</view>
		</cu-custom>
		<a-scroll :request="get" ref="aScroll" :loadStyle="{background:'transparent'}">
			<template #item="{row:i,index}">
				<view class="card-item" @click="go(i)">
					<a-seal :value="i.$status" class="seal" />
					<view class="title">{{ i.title }}</view>
					<a-cell :row="1" :value="i" :columns="columns" style="position: relative;z-index: 1;min-height: 80rpx;padding:0 12px;" />
					<!-- <a-btns :btns="btns" :value="i" /> -->
				</view>
			</template>
			<template #noData>
				没有请假
				<a-button style="min-width: 45vmin;margin-top: 3vmin;" @tap="add">
					<text class="iconfont icon-jia"></text>
					<text style="margin-left: 5px;margin-bottom: .1em;font-size: 18px;">申请</text>
				</a-button>
			</template>
		</a-scroll>
	</view>
</template>

<script>
	import {
		format
	} from "@/a/utils/api.js";
	import comm from "./common.js";
	export default {
		mixins: [comm],
		onShow() {
			(this.$refs.aScroll || {get:function(){}}).get(true);
		},
		computed: {
			btns() {
				return [{
					name: '撤销',
					click: ({
						id = ''
					}) => {
						uni.navigateTo({
							url: ''
						});
					},
					style: {
						background: 'linear-gradient(90deg, rgba(255, 85, 127,.8) 0%, rgba(255, 0, 0,.8) 100%)'
					}
				}];
			}
		},
		methods: {
			add(item) {
				uni.navigateTo({
					url: "./apply"
				});
			},
			get(parm = {}) {
				return this.$http.post('/api/v1/stuLeaveRecord/selectStuLeaveRecords', {
					...parm,
					stuId: this.$store.state.userInfo.id,
				}).then(res => {
					return {
						total: res.totalSize,
						data: res.results.map(x => {
							return {
								...x,
								startTime: format(x.startTime),
								endTime: format(x.endTime),
								$status: {
									color: "red",
									title: x.stateDesc
								}
							}
						})
					}
				});
			},
			go(e){
				uni.navigateTo({
					url:'./details?id='+e.id
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f1f1f7;
		height: 100%;
	}

	.add-btn-move {
		position: fixed;
		bottom: calc(0.1vmin + 2em);
		right: auto;
		top: auto;
		left: 2vmin;
		z-index: 100;
	}

	.card-item {
		margin: 20rpx;
		margin-bottom: 0;
		padding: 10rpx 0;
		background-color: #fff;
		position: relative;
		border-radius: 10rpx;
		box-shadow: 0 1px 4px 0 rgba(0, 0, 0, .1);

		.title {
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
			padding-left: 15px;
			line-height: 1.6em;
			font-size: 16px;
			font-weight: 700;
		}

		.seal {
			position: absolute;
			z-index: 0;
			top: 5px;
			right: 5px;
		}
	}
</style>
